
import './App.css';
import React, { useState } from 'react';


const Son = ({ onGetSonMsg }) => {
  const sonMsg = "from son msg"
  return (
    <div> son view
      <button onClick={() => onGetSonMsg(sonMsg)}> sendMsgToFather</button>
    </div>
  )
}

function App() {
  //1.return 显示父控件，子控件 父控件调用子控件返回的值
  //2.定义子控件 添加 msg方法
  //3.实现msg方法
  // 4.定义一个状态点击时改变value的值。
  const [msg, setMsg] = useState();
  const getMsg = (msg) => {
    setMsg(msg);
  }
  return (
    <span>
      <div > this is father view <br></br>
      <div style={{ color: 'red' }}>{msg}</div>
      </div>
      <Son onGetSonMsg={getMsg} />
    </span>
  )
}
export default App;